<template>
  <view class="chatInterface">
    <view class="scroll-view" id="scroll-view">
      <!--      <scroll-view scroll-into-view="bottom" scroll-y id="bottom">-->
      <!--消息记录-->
      <view v-for="message in history">
        <view class="message-item">
          <view class="message-item-content" :class="{ self: message.senderId === currentUser.userId.toString() }">
            <view class="sender-info">
              <img v-if="currentUser.userId.toString() === message.senderId" :src="currentUser.avatar"
                   class="avatar"/>
              <img v-if="currentUser.userId.toString() !== message.senderId" :src="friend.avatar"
                   class="avatar"/>
            </view>
            <view class="content" v-if="message.textType === 'TEXT'">
              <view class="text-content" :class="{ self: message.senderId === currentUser.userId.toString() }">
                <view>{{ message.text }}</view>
              </view>
            </view>
            <view v-if="message.textType === 'IMAGE'" @click="showImageFullScreen(message.text)">
              <img :src="message.text" style="height: 150rpx;width: 150rpx;margin-left: 22rpx;"/>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="action-box">
      <view class="action-top">
        <!-- GoEasyIM最大支持3k的文本消息，如需发送长文本，需调整输入框maxlength值 -->
        <input v-model="newMessage" class="consult-input" maxlength="700" placeholder="发送消息" type="text"/>
        <view @click="switchEmojiKeyboard">
          <img class="more"  src="./static/images/jianpan.png"></img>
        </view>
        <view>
          <img @click="showOtherTypesMessagePanel()" class="more" src="./static/images/more.png"/>
        </view>
        <view v-if="newMessage" class="send-btn-box">
          <text class="btn" @click="sendTextMessage()">发送</text>
        </view>
      </view>

      <!--其他类型消息面板-->
      <view v-if="otherTypesMessagePanelVisible" class="action-bottom">
        <view class="more-icon">
          <img @click="sendImageMessage()" class="operation-icon" src="./static/images/picture.png"></img>
          <view class="operation-title">图片</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getUserById, getMessage} from "../../../ruoyi-ui/src/api/message/message";
import EmojiDecoder from '../../api/message/lib/EmojiDecoder';
import {getToken} from "../../utils/auth";

export default {
  name: 'PrivateChat',
  computed: {
    Id: {
      get() {
        // 返回计算属性的值
        return this.$store.state.chat.id;
      },
      set(value) {
        // 在这里处理计算属性的赋值操作
        this.$store.commit('SET_ID', value);
      }
    }
  },
  data() {
    return {
      otherTypesMessagePanelVisible: false,
      currentUser: null,
      friend: "",
      to: {},//用于创建消息时传入
      message: "",
      history: [],
      newMessage: "",
      messageLength: "",
      style: {
        pageHeight: 0,
        contentViewHeight: 0,
        footViewHeight: 90,
        mitemHeight: 0,
      },
      scrollTop: 0,
    };
  },
  watch: {
    Id: {
      async handler() {
        if (this.$store.state.chat.id !== "") {
         await getUserById(this.$store.state.chat.id).then(resp => {
            this.friend = resp.data
          })
          await getMessage(this.$store.state.chat.id).then(resp => {
            this.history = resp
            this.$nextTick(() => {
              uni.pageScrollTo({
                scrollTop: 2000000,
                duration: 0
              });
            });
          })
        } else {
          this.friend = ""
        }
      },
      immediate: true,
      deep: true
    },
  },
  created() {
    this.Id = this.$store.state.chat.id
    this.currentUser = this.$store.state.user.user
    let webSocket = new WebSocket("ws://localhost:8080/message/ws/" + this.currentUser.userId);
    webSocket.onopen = (evt) => {
    }
    webSocket.onclose = (evt) => {

    }
    webSocket.onmessage = (evt) => {
      let data = JSON.parse(evt.data)
      if (data.type === "JOIN" || data.type === "LEAVE") {
      } else if (data.toId.toString().includes("单")){
        if (data.toId.substring(0,data.toId.toString().indexOf("单"))===this.currentUser.userId.toString()||
            data.toId.substring(0,data.toId.toString().indexOf("单"))===this.friend.userId.toString()){
          this.history.push(data);
          console.info("滚动2")
          this.$nextTick(() => {
            uni.pageScrollTo({
              scrollTop: 2000000,
              duration: 0
            });
          });
        }
      }
    };

    webSocket.onerror = (evt) => {
      console.info("出现错误", evt)
    };
    this.webSocket = webSocket

  },
  methods: {
    showImageFullScreen(e) {
      uni.previewImage({
        current: 0,
        urls: [e]
      });
    },

    sendImageMessage() {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          res.tempFiles.forEach(file => {
            uni.uploadFile( {
              method: 'POST',
              url:"/dev-api/file/upload",
              header: {
                Authorization: "Bearer " + getToken(),
              },
              file: file,
              name:"file"
            }).then(resp=>{
              const newMessage = {
                toId: this.friend.userId+"单",
                text:JSON.parse(resp[1].data).data.url,
                senderId: this.$store.state.user.user.userId,
                type: "MESSAGE",
                textType: "IMAGE"
              };
              this.webSocket.send(JSON.stringify(newMessage))
            })

          })
        }
      });
    },
    sendOrderMessage(order) {
      this.orderList.visible = false;
    },

    showOtherTypesMessagePanel() {
      this.otherTypesMessagePanelVisible = !this.otherTypesMessagePanelVisible;
      this.$nextTick(() => {
        uni.pageScrollTo({
          scrollTop: 2000000,
          duration: 0
        });
      });
    },
    sendTextMessage() {
      if (this.newMessage.trim()) {
        const newMessage = {
          toId: this.friend.userId+"单",
          text: this.newMessage,
          senderId: this.$store.state.user.user.userId,
          type: "MESSAGE",
          textType: "TEXT"
        };
        this.webSocket.send(JSON.stringify(newMessage))
      }
      this.newMessage = '';
    }
  }
}
</script>

<style>
page {
  height: 100%;
}
.chat-avatar {
  width: 35px;
  height: 35px;
}
.send-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110rpx;
  height: 60rpx;
  border-radius: 10rpx;
  background: #D02129;

}

.chat-title {
  height: 40px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.action-bottom {
  height: 300rpx;
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
}

.action-box {
  display: flex;
  backdrop-filter: blur(0.27rpx);
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  flex-direction: column;
  background-color: #F1F1F1;
}

.more-icon {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 30rpx;
}

.action-top {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: #F6F6F6;
  backdrop-filter: blur(27.1828px);
  border-top: 1px solid #ECECEC;
  padding: 0 20rpx;
}
.operation-icon {
  width: 60rpx;
  height: 60rpx;
  min-width: 60rpx;
  min-height: 60rpx;
  padding: 25rpx;
  border-radius: 20rpx;
  background: #FFFFFF;
}
.consult-input {

  flex: 1;
  height: 80%;
  padding-left: 20rpx;
  margin: 20rpx;
  margin-left: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  border-radius: 6px;
  background: #FFFFFF;
  font-size: 34rpx;
}

.more {
  width: 62rpx;
  height: 62rpx;
  margin-right: 10rpx;
  display: flex;
}

.chatInterface {
  height: 100%;
  background-color: #F1F1F1;
}

.send-box {
  display: inline-block;
}

.content-text {
  background: white;
  border-radius: 8px;
  height: 30px;
  line-height: 30px;
}

.chatInterface .scroll-view .content .text-content {
  position: relative;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 20px;
}


.chatInterface .scroll-view {
  padding-left: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  background-color: #F1F1F1;
  padding-bottom: 80rpx;
}

.chatInterface .scroll-view .history-loaded {
  font-size: 34rpx;
  height: 60rpx;
  line-height: 60rpx;
  width: 100%;
  text-align: center;
  color: #cccccc;
}

.chatInterface .scroll-view .load {
  font-size: 34rpx;
  height: 60rpx;
  line-height: 60rpx;
  width: 100%;
  text-align: center;
  color: #d02129;
}

.chatInterface .scroll-view .message-item {
  display: flex;
  margin: 20rpx 0;
}

.chatInterface .scroll-view .message-item .message-item-checkbox {
  height: 80rpx;
  display: flex;
  align-items: center;
}

.chatInterface .scroll-view .message-item .message-item-content {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.chatInterface .scroll-view .message-item .message-item-content.self {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.chatInterface .scroll-view .message-item .avatar {
  width: 110rpx;
  height: 110rpx;
  flex-shrink: 0;
  flex-grow: 0;
}

.chatInterface .scroll-view .message-item .avatar image {
  width: 100%;
  height: 100%;
}
.sender-name{
  text-align: right;
  font-size: medium;
}

.chatInterface .scroll-view .content {
  font-size: 34rpx;
  line-height: 44rpx;
  margin: 0 20rpx;
  max-width: 520rpx;
}

.chatInterface .scroll-view .content .message-payload {
  display: flex;
  align-items: center;
}

.chatInterface .scroll-view .content .image-content {
  border-radius: 12rpx;
  max-height: 200px;
}

.chatInterface .scroll-view .content .text-content {
  padding: 16rpx;
  border-radius: 20rpx;
  color: #000000;
  background: #FFFFFF;
  word-break: break-all;
  vertical-align: center;
  display: block;
  font-size: large;
}
.chatInterface .scroll-view .content .text-content.self {
  background: limegreen;
  color: black;
}

.chatInterface .scroll-view .content .text-content img {
  width: 50rpx;
  height: 50rpx;
}

.chatInterface .scroll-view .content .file-content {
  width: 560rpx;
  height: 152rpx;
  font-size: 34rpx;
  background: white;
  display: flex;
  align-items: center;
  border-radius: 10rpx;
  padding: 0 20rpx;
}

.chatInterface .scroll-view .content .file-content .file-info {
  width: 386rpx;
  height: 132rpx;
}

.chatInterface .scroll-view .content .file-content .file-info .file-name {
  width: 400rpx;
  margin-top: 15rpx;
  font-size: 34rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.chatInterface .scroll-view .content .file-content .file-info .file-size {
  width: 200rpx;
  font-size: 34rpx;
  color: #ccc;
}

.chatInterface .scroll-view .content .file-content .file-img {
  width: 100rpx;
  height: 100rpx;
}

.chatInterface .scroll-view .content .pending {
  background: url("/ruoyi-app/pages/messagege/static/images/pending.gif") no-repeat center;
  background-size: 30rpx;
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.chatInterface .scroll-view .content .send-fail {
  background: url("/ruoyi-app/pages/messagege/static/images/failed.png") no-repeat center;
  background-size: 30rpx;
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}


.orders-content {
  position: absolute;
  width: 100%;
  bottom: 0;
  background: #F1F1F1;
  z-index: 200;
}

.title {
  font-weight: 600;
  font-size: 34rpx;
  color: #000000;
  margin-left: 20rpx;
  margin-right: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close {
  font-size: 50rpx;
}

.order-item {
  padding: 20rpx;
  background: #FFFFFF;
  margin: 20rpx;
  border-radius: 20rpx;
}

.order-id {
  font-size: 34rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.order-body {
  display: flex;
  font-size: 34rpx;
}

.order-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
}

.order-name {
  margin-left: 20rpx;
  width: 270rpx;
}

.order-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-price {
  font-weight: bold;
}

.order-count {
  font-size: 34rpx;
  color: #666666;
}

.chatInterface .video-snapshot {
  position: relative;
}

.chatInterface .video-snapshot video {
  max-height: 300rpx;
  max-width: 400rpx;
}

.chatInterface .video-snapshot .video-play-icon {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background: url("/ruoyi-app/pages/messagege/static/images/play.png") no-repeat center;
  background-size: 100%;
  top: 50%;
  left: 50%;
  margin: -20rpx;
}

.chatInterface .group-icon {
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  top: 14rpx;
  position: fixed;
  right: 20rpx;
  top: 120rpx;
  background-color: #C4C4C4;
  z-index: 2;
  border-radius: 60rpx;
}

.uni-toast {
  background-color: #ffffff !important;
}

.time-lag {
  font-size: 34rpx;
  text-align: center;
}

.chatInterface .audio-content {
  height: 86rpx;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.chatInterface .audio-facade {
  min-width: 20rpx;
  padding: 6rpx 10rpx;
  line-height: 72rpx;
  background: #FFFFFF;
  font-size: 34rpx;
  border-radius: 14rpx;
  color: #000000;
  display: flex;
}

.chatInterface .audio-facade-bg {
  background: url("/ruoyi-app/pages/messagege/static/images/voice.png") no-repeat center;
  background-size: 30rpx;
  width: 40rpx;
}

.chatInterface .audio-facade-bg.play-icon {
  background: url("/ruoyi-app/pages/messagege/static/images/play.gif") no-repeat center;
  background-size: 30rpx;
}

.chatInterface .order-content {
  border-radius: 20rpx;
  background: #FFFFFF;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
}

.scroll-view .content .order-id {
  color: #333333;
}

.scroll-view .content .order-body {
  padding: 10rpx;
}

.scroll-view .content .order-name {
  font-weight: normal;
}

.scroll-view .content .order-info {
  display: flex;
  justify-content: space-between;
  padding: 10rpx;
}

.scroll-view .content .order-info .order-price {
  font-weight: normal;
}

.message-read {
  color: grey;
  font-size: 34rpx;
  text-align: end;
  height: 36rpx;
}

.message-unread {
  color: #d02129;
  font-size: 34rpx;
  text-align: end;
}

.message-recalled {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 56rpx;
  font-size: 34rpx;
  text-align: center;
  color: grey;
}

.message-recalled .message-recalled-self {
  display: flex;
}

.message-recalled .message-recalled-self span {
  margin-left: 10rpx;
  color: #d02129;
}

.send-input {
  position: fixed;
  bottom: 0;
  background: white;
  flex: 1;
  width: 100%;
  height: 7%;
  padding-left: 20rpx;
  margin: 5rpx;
  border: none;
  outline: none;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 34rpx;
}

.send-box {
  padding: 5px 10px;
  text-align: right;
  font-size: 34rpx;
  margin-right: 20px;
  line-height: 216%;
  position: fixed;
  bottom: 0;
  right: 0;
}

</style>